<template>
	<view class="safety homePage ">
		<!-- <view class="topHeaderBox between navBox" :style="{paddingTop: `${systemBarHeight+10}px`}">
			<image class="backIcon" src="https://wx.2024csnl.com/static/mine/back.png" @click="goBack(100)" style="margin-left: 10rpx;"></image>
			<view>{{details.name}}</view>
			<view></view>
		</view> -->
		
		<!-- 主要内容区 -->
		<view class="mainBox" _style="{paddingTop:`${systemBarHeight+10}px`}">
			<!-- 轮播图 -->
			<view
				class="swiperBigBox"
				style="position: relative;"
				v-if="swiperList.length != 0 && option.way != 1">
				<swiper
					class="swiper-box"
					circular
					:autoplay="true"
					:interval="3000"
					@change="changeswiper"
					:current="currentswiper"
					:duration="500">
					<swiper-item
						v-for="(item,i) in swiperList"
						:key="i"
						@click="onSkip(item.url)">
						<image
							:src="item.img"
							mode="aspectFill"
							:style="{backgroundColor:item}"
							class="swiper-img" />
						<!-- <view class="swiperNumBox">
							{{currentswiper+1}}/{{swiperList.length}}
						</view> -->
					</swiper-item>
				</swiper>
				
				<view class="typi">
					<!-- <view class="it is-active">
						<text>图片</text>
					</view> -->
					<!-- <view class="it">
						<text>视频</text>
					</view> -->
					<!-- <view class="it">
						<text>详情介绍</text>
					</view> -->
				</view>
			</view>
			
			<!-- <view class="weui-code">
				<text>{{ details }}</text>
			</view> -->
			
			<view class="store-profile" v-if="option.way != 1">
				<view class="name">
					<text>{{ details.name }}</text>
				</view>
				<!-- <view class="time">
					<text>营业时间 | {{ '周一到周日 09:00-22:00' }}</text>
				</view> -->
				<view class="contact">
					<view
						class="map"
						@tap="openMap">
						<view class="text">
							<view class="address">
								<text>{{ details.address }}</text>
							</view>
							<view class="juli">
								<image
									src="https://img.2024csnl.com/static/2.x/a30.png"
									mode="">
								</image>
								<text>距您{{ '12.34km' }}</text>
							</view>
						</view>
						<view class="icon">
							<image
								src="https://img.2024csnl.com/static/2.x/a28.png"
								mode="">
							</image>
							<text>导航</text>
						</view>
					</view>
					<view
						class="tel"
						@tap="onTelPhone(details.tel)">
						<view class="icon">
							<image
								src="https://img.2024csnl.com/static/2.x/a29.png"
								mode="">
							</image>
							<text>电话</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- <view style="margin: 0 20rpx;">
				<uni-notice-bar scrollable="true" speed="20" background-color="#fff" :text="textList">
				</uni-notice-bar>
			</view> -->
			
			<view class="store-content">
				<view class="store-tabs">
					<view :class="{
						'item': true,
						'is-active': storeIndex === 0
						}"
						@tap="changeStoreIn(0)">
						<view class="cell">
							<view class="text">
								<text>逆伶产品</text>
							</view>
							<view class="line"></view>
						</view>
					</view>
					<view :class="{
						'item': true,
						'is-active': storeIndex === 1
						}"
						@tap="changeStoreIn(1)">
						<view class="cell">
							<view class="text">
								<text>门店展示</text>
							</view>
							<view class="line"></view>
						</view>
					</view>
				</view>
				
				<view
					v-if="storeIndex === 0"
					class="store-goods">
					<view class="tabs">
						<view
							v-for="(list,idx) in goodsList"
							:key="idx"
							:class="{
								'item': true,
								'is-active': goodsIndex === idx
							}"
							@tap="changeStoreTp(idx)">
							<view class="name">
								<text>{{ list.classify }}</text>
							</view>
						</view>
					</view>
					<view class="goods">
						<view
							v-for="(list,idx) in goodsList"
							:key="idx">
							<view v-if="goodsIndex === idx">
								<view class="classify">
									<text>{{list.classify}}</text>
								</view>
								<view class="list">
									<view
										class="item"
										v-for="(goods,i) in list.goods"
										:key="i"
										@click="onSkip(`/pages/goods/goods-detail?id=${goods.id}&pageType=商家列表`)">
										<view class="cell">
											<view class="img">
												<image :src="goods.pic"></image>
											</view>
											<view>
												<view class="tit">
													<text>{{goods.name}}</text>
												</view>
												<view class="price">
													<text>￥</text>
													<text>{{goods.sell_price}}</text>
												</view>
												<view class="stock">
													<text>库存：{{ goods.stock }}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view
					v-else-if="storeIndex === 1"
					class="store-show">
					<view
						v-if="details.content"
						class=""
						style="padding: 0px 20px 100px; ">
						<view v-html="details.content">
							
						</view>
					</view>
					<view
						v-else
						class=""
						style="padding: 0px 20px 100px; color: #999;">
						<text>暂无内容</text>
					</view>
				</view>
			</view>
			
			<!-- 推广分类 -->
			
		</view>
		
		<!-- <view class="tab-hig" /> -->
			<!-- <image v-if="kefu_link" src="https://wx.2024csnl.com/static/chat.png" @click="goToUrl(kefu_link)" mode="widthFix" style="width: 100rpx; position: fixed; right: 30rpx; bottom: 180rpx;"></image> -->
			
			<!-- <tabbar :current="0" :bid="bid"></tabbar> -->
		</view>
</template>

<script>
	import {
		getHotMerchantDetails,
		busGroupBooking,
		getBusnessRecommendGoods,
		getAppConfigSync
	} from "@/api/index.js"
	import tabbar from '@/components/tabbar.vue';
	export default {
		components: {
			tabbar,
		},
		data() {
			return {
				option: {},
				storeIndex: 0,
				goodsIndex: 0,
				kefu_link: '',
				ranking: false, //是否从榜单过来
				goodsList: [],
				currentswiper: 0, //广告位当前轮播图idx
				groupList: [], //拼团商品
				details: {},
				bid: '', //商家id
				textList: [],
				isShowBizMap: false,
				systemBarHeight: getApp().globalData.systemBarHeight,
				swiperList: [],
				navList: [{
						name: '广告任务',
						img: 'home-ggrw'
					},
					{
						name: '京东',
						img: 'home-jd',
						url: '/business/pages/business_tab/commodityList?tit=京东'
					},

					{
						name: '淘宝',
						img: 'home-tb',
						url: '/business/pages/business_tab/commodityList?tit=淘宝'
					},
					{
						name: '拼多多',
						img: 'home-pdd',
						url: '/business/pages/business_tab/commodityList?tit=拼多多'
					},
					{
						name: '聚划算',
						img: 'home-jhs',
						url: '/business/pages/business_tab/commodityList?tit=聚划算'
					},
					{
						name: '天猫',
						img: 'home-tm',
						url: '/business/pages/business_tab/commodityList?tit=天猫'
					},
					{
						name: '唯品会',
						img: 'home-wph',
						url: '/business/pages/business_tab/commodityList?tit=唯品会'
					},

					{
						name: '今日上新',
						img: 'home-jrsx',
						url: '/business/pages/business_tab/commodityList?tit=今日上新'
					},
					{
						name: '苏宁',
						img: 'home-sn',
						url: '/business/pages/business_tab/commodityList?tit=苏宁'
					},
					{
						name: '考拉',
						img: 'home-kl',
						url: '/business/pages/business_tab/commodityList?tit=考拉'
					},
				],
				cardList: ['miaosha', 'choujiang'],
				typeIndex: '',
				imgList: [{
						icon: 'home-jpont'
					},
					{
						icon: 'home-jptwo'
					},
					{
						icon: 'home-jpthree'
					}
				]
			}

		},
		onLoad(opt) {
			const appConfig = getAppConfigSync()
			this.title = '店铺首页';
			this.isShowBizMap = appConfig.isShowBizMap
			this.ranking = opt.ranking
			this.bid = opt.bid
			this.option = opt
			this.onGetHotMerchantDetails(opt.bid)
			this.getBusGroupBooking()
			this.onGetBusnessRecommendGoods()
		},
		methods: {
			goToUrl(url) {
				uni.navigateTo({
					url: `/business/pages/business_tab/web?url=${encodeURIComponent(url)}`
				})
			},
			onTelPhone(tel) {
				if (!tel) return uni.showToast({
					icon: 'none',
					title: '店家未设置电话号码，请联系客服'
				})
				this.callPhone(tel)

			},
			onOpen(img) {
				uni.previewImage({
					urls: [img],
					current: 0,
				})
			},
			// 推荐商品
			async onGetBusnessRecommendGoods() {
				const res = await busGroupBooking(`s=/ApiIndex/maingoodslist`, {
					bid: this.bid
				})
				const {
					data,
					status,
					msg,
				} = res.data
				console.log(res, "111")
				if (status == 1) {
					data.map(item => {
						item.classify = item.classify.replace(/系列/g, '');
					})
					this.goodsList = data
				} else {
					this.showToast(msg)
				}
			},

			changeswiper(e) {
				this.currentswiper = e.detail.current
			},
			// 拼团数据
			async getBusGroupBooking() {
				const res = await busGroupBooking(`s=/ApiCollage/goodslist`, {
					bid: this.bid
				})
				const {
					data,
					status,
					msg,
				} = res.data
				// console.log(res, "111")
				if (status == 1) {
					this.groupList = data
				} else {
					this.showToast(msg)
				}
			},
			openMap() {
				const {
					latitude,
					longitude,
					name
				} = this.details
				// console.log("获取经纬度ssssfff", lon, lat);
				uni.openLocation({
					latitude: parseFloat(latitude),
					longitude: parseFloat(longitude),
					scale: 15,
					name: name
				})
			},
			// 详情
			async onGetHotMerchantDetails(id) {
				const res = await getHotMerchantDetails(`s=/ApiIndex/businessxq&id=${id}`)
				const {
					data,
					status,
					banner,
					msg,
					notice
				} = res.data
				console.log(res, "111")
				if (status == 1) {
					this.title = data.name;
					this.details = data
					this.swiperList = banner
					this.kefu_link = data.kefu_link
				
					this.textList = notice.map(item => {
						return {
							content: item
						}
					})
					// console.log(data,"***")
				} else {
					this.showToast(msg)
				}
			},

			onGo(i) {
				i == 0 ? this.onSkip(`/business/pages/business_tab/seckill?bid=${this.bid}`) : this.onSkip(
					`/package/mine/circleDraw?bid=${this.bid}&id=1&&pageType=2`)
			},

			onGoTab() {
				if (this.ranking) {
					this.goBack(100)
					return
				}
				uni.switchTab({
					url: getApp().globalData.HOME_PAGE
				})
			},
			checkType(id) {
				this.typeIndex = id;
				// this.$refs.popup.open();
			},
			changeStoreTp (index) {
				this.goodsIndex = index;
			},
			changeStoreIn (index) {
				this.storeIndex = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.classifyTit {
		padding: 0 30rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.listBigBox {
		display: grid;
		padding: 30rpx;
		grid-gap: 30rpx;
		grid-template-columns: repeat(3, 1fr);

		.oneGoods {
			background: #F7F7F7;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;

			image {
				width: 28vw;
				height: 200rpx;
				border-radius: 20rpx 20rpx 0px 0px;
			}

			.tit {
				margin-bottom: 20rpx;
				width: 200rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.priseBox {
				color: #F71212;

				text {
					font-weight: bold;
					font-size: 36rpx;
				}
			}
		}
	}

	.swiperNumBox {
		background: rgba(0, 0, 0, 0.3);
		border-radius: 25px;
		padding: 3rpx 15rpx;
		position: absolute;
		font-size: 26rpx;
		bottom: 20rpx;
		right: 20rpx;
		color: #fff;
	}

	.topHeaderBox {
		padding: 30rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1;
		display: flex;
		background: #41644A;
	}

	.navBox {
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
	}

	.backIcon {
		width: 21rpx;
		height: 37rpx;
	}

	.home-top {
		background: #41644A;
		padding-bottom: 180rpx;

		.home-msg {
			width: 40rpx;
			height: 38rpx;
			margin: 0 40rpx;
			margin-left: 20rpx;
		}

		.search-box {
			background-color: #FFF;
			border-radius: 13rpx;
			flex: 1;
			padding: 20rpx 28rpx;

			.home-search {
				width: 25rpx;
				height: 25rpx;
			}

			.home-search-input {
				flex: 1;
				font-size: 27rpx;
				margin-left: 16rpx;
			}

			.home-search-btn {
				padding-left: 28rpx;
				color: #41644A;
				font-size: 27rpx;
				border-left: 1rpx solid #F0F0F0;
			}
		}
	}

	.business-box {
		margin: 20rpx;
		padding: 20rpx;
		margin-top: -160rpx;
		box-shadow: 0 1rpx 10rpx 0 rgba(0, 0, 0, 0.1);
		background-color: #FFF;
		border-radius: 20rpx;

		.score {
			font-size: 24rpx;
			color: #999999;
			margin: 20rpx 0 40rpx;

			.score-num {
				color: #FFC823;
			}

			.month-sales {
				margin-left: 16rpx;
			}
		}

		.star {
			width: 20rpx;
			height: 20rpx;
			margin-right: 4rpx;
		}

		.home-jp {
			width: 43rpx;
			height: 45rpx;
			margin-right: 24rpx;
		}

		.business-goods-img {
			// width: 108rpx;
			// height: 108rpx;
			width: 170rpx;
			height: 170rpx;
			border-radius: 13rpx;
			background-color: #999999;
		}

		.business-call-wz {
			font-size: 24rpx;
			color: #333333;
			margin-top: 16rpx;

			image {
				width: 25rpx;
				height: 25rpx;
			}

			.ml {
				margin-left: 40rpx;
			}
		}
	}

	.swiper-box {
		width: 100vw;
		height: 72vw;
		.swiper-img {
			width: 100vw;
			height: 72vw;
			background-color: #eeeeee;
		}

		.po-r {
			position: relative;

			.swiper-num {
				background-color: #00000066;
				padding: 4rpx 20rpx;
				font-size: 24rpx;
				display: inline-block;
				border-radius: 30rpx;
				position: absolute;
				color: #FFF;
				bottom: 16rpx;
				right: 8rpx;
				z-index: 9;
			}
		}
	}


	.everyday-buy {
		margin: 20rpx;
		background-color: #FF0082;
		border-radius: 20rpx;
		color: #FFF;
		padding: 24rpx;

		.home-hio {
			width: 41rpx;
			height: 41rpx;
		}

		.qyrk {
			font-size: 32rpx;
			margin: 0 8rpx;
			margin-right: 16rpx;
		}

		.mrbm {
			font-size: 27rpx;
		}

		.ljgm-box {
			width: 146rpx;
			height: 38rpx;
			position: relative;
		}

		.home-ljcg {
			width: 146rpx;
			height: 38rpx;
		}

		.ljgm-text {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			text-align: center;
			margin: 0 auto;
			color: #FF0082;
			line-height: 38rpx;
			font-size: 24rpx;
		}

		.everydayGoodsBox {
			overflow-y: auto;
			width: 90vw;
		}

		.everyday-goods {
			min-width: 27vw;
			max-width: 30rpx;
			background-color: #FFF;
			border-radius: 13rpx;
			margin: 20rpx 28rpx 20rpx 0;
			flex-direction: column;
			justify-content: center;

			image {
				height: 142rpx;
				max-width: 124rpx;
				background-color: #69B0FE;
				margin: 20rpx 0;
			}

			.everyday-sold {
				background-color: #F40E2A;
				text-align: center;
				color: #FFF;
				font-size: 20rpx;
				padding: 8rpx 16rpx;
				min-width: 50%;
				border-radius: 13rpx 13rpx 0 0;
			}

			.goods-price {
				text-align: center;
				font-size: 'PingFang-SC-Bold';
				margin: 8rpx 0;
				color: #F40E2A;
				font-size: 20rpx;

				.goods-num {
					font-size: 32rpx;
				}
			}
		}
	}

	.img-card {
		width: 347rpx;
		height: 200rpx;
	}

	.home-invite {
		width: 710rpx;
		height: 233rpx;
		display: block;
		margin: 0 auto;
	}

	.label-name {
		justify-content: center;
		padding: 40rpx;
		font-size: 36rpx;
		font-weight: bold;

		.label-left,
		.label-right {
			width: 136rpx;
			height: 12rpx;
			border-radius: 8rpx;
			background-image: linear-gradient(to right, #FFF8F8, #41644A);
			margin: 0 20rpx;
		}

		.label-right {
			background-image: linear-gradient(to left, #FFF8F8, #41644A);
		}
	}

	.home-dz-ss {
		font-size: 29rpx;
		padding: 20rpx;
		padding-top: 0;

		.home-dw {
			width: 25rpx;
			height: 25rpx;
			margin-left: 16rpx;
		}

		.search-box {
			background-color: #F5F5F5;
			flex: 1;
			margin-left: 40rpx;
			margin-right: 0;

			input {
				font-size: 27rpx;
				margin-left: 16rpx;
			}
		}
	}

	.type-list {
		padding: 20rpx;
		padding-top: 0;

		.home-xl {
			width: 17rpx;
			height: 12rpx;
			margin-left: 12rpx;
		}

		.xl-act {
			color: #41644A;
		}
	}

	.goods-list {
		background: #F7F7F7;
		padding: 20rpx;

		.goods-item {
			padding: 27rpx 20rpx;
			background-color: #FFF;
			border-radius: 20rpx;
			font-size: 29rpx;
			margin: 20rpx 0;

			.goods-img {
				width: 160rpx;
				height: 160rpx;
				background-color: #999999;
				margin-right: 24rpx;
				border-radius: 13rpx;
			}


			.goods-discount {
				font-size: 24rpx;
				padding: 6rpx 15rpx;
				background-color: #EF1B1B;
				color: #FFF;
				display: inline-block;
				border-radius: 8rpx;
			}

			.goods-tickets {
				font-size: 24rpx;
				padding: 6rpx 0;
				border-radius: 8rpx;
				border: 1rpx solid #EF1B1B;
				color: #EF1B1B;
				margin-left: 20rpx;

				.tickets-item {
					display: inline-block;
					padding: 0 15rpx;
					border-right: 1rpx solid #EF1B1B;
				}

				.tickets-item:last-child {
					border-right: none;
				}
			}
		}
	}
	
	.homePage {
		min-height: 100vh;
		background: #f8f8f8;
	}
	
	.swiperBigBox {
		.typi {
			position: absolute;
			right: 30rpx;
			bottom: 50rpx;
			display: flex;
			align-items: center;
			.it {
				background: rgba(0, 0, 0, .8);
				color: #ffffff;
				height: 50rpx;
				line-height: 50rpx;
				padding: 0 20rpx;
				& + .it {
					border-left: 1px solid #666666;
				}
				&:first-child {
					border-radius: 40rpx 0 0 40rpx;
				}
				&:last-child {
					border-radius: 0 40rpx 40rpx 0;
				}
				&.is-active {
					background: rgba(255, 255, 255, .8);
					color: #333333;
				}
			}
		}
	}
	
	.store-profile {
		position: relative;
		z-index: 2;
		margin: -20rpx 0 0;
		padding: 30rpx;
		border-radius: 20rpx;
		background: #ffffff;
		.name {
			line-height: 50rpx;
			font-size: 40rpx;
			font-weight: bold;
			color: #000000;
		}
		.time {
			margin: 20rpx 0 0;
			text {
				color: #999999;
			}
		}
		.contact {
			border-top: 1px solid #f2f2f2;
			margin-top: 20rpx;
			padding: 20rpx 0 0;
			display: flex;
			align-items: center;
			.map {
				flex: 1;
				display: flex;
				align-items: center;
				.text {
					flex: 1;
				}
				.address {
					line-height: 40rpx;
					text {
						font-size: 28rpx;
					}
				}
				.juli {
					display: flex;
					align-items: center;
					margin: 20rpx 0 0;
					image {
						display: block;
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
					text {
						color: #a8b0aa;
					}
				}
			}
			.tel {}
			.icon {
				position: relative;
				text-align: center;
				padding: 10rpx 20rpx;
				image {
					display: block;
					width: 50rpx;
					height: 50rpx;
				}
				text {
					display: block;
					line-height: 50rpx;
					color: #41644A;
					font-size: 28rpx;
				}
			}
		}
	}
	
	.store-content {
		margin-top: 30rpx;
		background: #ffffff;
		border-radius: 20rpx;
		position: relative;
	}
	
	.store-tabs {
		display: flex;
		align-items: center;
		margin: 0 30rpx 30rpx;
		border-bottom: 1px solid #f2f2f2;
		padding: 20rpx 0;
		.item {
			flex: 1;
			& + .item {
				border-left: 1px solid #f2f2f2;
			}
			&.is-active {
				.cell {
					font-weight: bold;
					.text {
						color: #41644A;
					}
				}
				.line {
					visibility: visible;
				}
			}
			.cell {
				position: relative;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
			}
			.text {
				position: relative;
				z-index: 2;
				font-size: 30rpx;
			}
			.line {
				visibility: hidden;
				position: absolute;
				left: 50%;
				margin-left: -80rpx;
				top: 40rpx;
				background: linear-gradient(270deg, rgba(253, 214, 159, 0) 0%, #FDD69F 100%);
				border-radius: 10rpx;
				width: 180rpx;
				height: 20rpx;
			}
		}
	}
	
	.store-goods {
		display: flex;
		min-height: calc(100vh - 1000rpx);
		.tabs {
			width: 180rpx;
			background: #f8f8f8;
			.item {
				position: relative;
				&.is-active {
					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: 20rpx;
						bottom: 20rpx;
						background: #41644A;
						width: 8rpx;
						z-index: 1;
					}
					.name {
						color: #41644A;
						font-weight: bold;
					}
				}
			}
			.name {
				line-height: 40rpx;
				padding: 20rpx;
				font-size: 28rpx;
				color: #999999;
				text-align: center;
			}
		}
		.goods {
			flex: 1;
			.classify {
				padding: 20rpx;
				line-height: 40rpx;
				text {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}
			}
			.list {}
			.item {}
			.cell {
				display: flex;
				align-items: center;
				margin: 20rpx;
			}
			.img {
				margin-right: 20rpx;
				image {
					display: block;
					width: 180rpx;
					height: 180rpx;
					background: #eeeeee;
					border-radius: 20rpx;
				}
			}
			.tit {
				line-height: 40rpx;
				text-align: justify;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text {
					font-size: 28rpx;
					color: #000000;
				}
			}
			.price {
				margin-top: 10rpx;
				line-height: 40rpx;
				text {
					color: #E86A33;
					font-size: 30rpx;
					font-weight: bold;
					&:first-child {
						font-size: 24rpx;
						font-weight: normal;
					}
				}
			}
			.stock {
				margin-top: 20rpx;
				text {
					color: #999999;
				}
			}
		}
	}
	
	.store-show {}
</style>